<div class="ui list mt-0 mb-0 pt-0 pb-0 public-social-links">
  <div class="social-links mt-0 mb-0 pt-0 pb-0">
    {{#if this.externalUrl}}
      <div>
        <a href="{{this.externalUrl}}" class="ui icon social-link-button blue button mb-1" target="_blank" rel="noopener nofollow">
          <div style="font-size: .7rem;">{{t 'Event'}}<br/>{{t 'Site'}}</div>
        </a>
      </div>
    {{/if}}
    {{#each this.socialLinks as |socialLink|}}
      {{#if (not-eq socialLink.normalizedName 'globe')}}
        <div>
          <a href="{{socialLink.link}}" class="ui icon social-link-button mb-1 {{socialLink.normalizedName}} {{socialLink.buttonColor}} d-flex items-center content-center button">
            {{#if (eq socialLink.normalizedName 'mastodon')}}
              <Icons::Mastodon />
            {{else}}
              <i class="ui inverted {{socialLink.normalizedName}} icon"></i>
            {{/if}}
          </a>
        </div>
      {{/if}}
    {{/each}}
  {{#each this.socialLinks as |socialLink|}}
    {{#if (eq socialLink.normalizedName 'globe')}}
      <div>
        <UiPopup @content={{t-var socialLink.displayName}}>
          <a href="{{socialLink.link}}" class="ui icon blue mb-1 social-link-button button extra-link d-flex items-center content-center" target="_blank" rel="noopener nofollow">
            <div  class="clamp" style="font-size: .8rem;">{{socialLink.displayName}}</div>
          </a>
        </UiPopup>
      </div>
    {{/if}}
  {{/each}}
  </div>
</div>
